<template>
  <ElMenu
    :default-active="$route.path"
    class="el-menu-vertical-demo"
    @open="handleOpen"
    @close="handleClose"
    :default-openeds="openeds"
  >
    <div v-for="(item, index) in props.menuList" :key="index">
      <ElSubMenu :index="item.title" v-if="item.menuType == 0">
        <template #title>
          <i :class="item.icon" style="color: #3356f4"></i>
          <span style="margin-left: 5px">{{ item.title }}</span>
        </template>
        <ElMenuItem v-for="(v, i) in item.children" :key="i" :index="v.path" @click="turnMenu(v)">
          <i :class="v.icon"></i>{{ v.title }}
        </ElMenuItem>
      </ElSubMenu>
    </div>
  </ElMenu>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import router from '@/router'

const props = defineProps({
  menuList: {
    type: Array<any>,
    default: () => []
  }
})
const openeds = ref(['1'])
const handleOpen = (_key: string, _keyPath: string[]) => {}
const handleClose = (_key: string, _keyPath: string[]) => {}
const turnMenu = (val: any) => {
  switch (val.openType) {
    case 0:
      //普通打开
      router.push(val.path)
      break
    case 1:
      //新页面打开
      window.open(router.resolve({ path: val.path }).href, '_blank')
      break
  }
}
</script>

<style>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
  height: 100%;
}
</style>
